<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>课程类型管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
</head>
<body style="padding:8px;">
<h3 class="title">课程管理</h3>
<form action="" method="POST">
    <input type="hidden" name="_method" value="DELETE"/>
</form>
<div id="queryArea">
    <form th:action="@{/course/list}" method="post" th:object="${helper}">
        课程名称：<input type="text" name="qryCourseName" th:value="*{qryCourseName}" />&nbsp;&nbsp;
        学分范围：<input type="text" name="qryStartPoint" size="6" th:value="*{qryStartPoint}" /> - <input type="text" name="qryEndPoint" size="6" th:value="*{qryEndPoint}" />&nbsp;&nbsp;
        课程类型：
        <select name="qryCourseType" th:field="*{qryCourseType}">
            <option th:if="${#strings.isEmpty(qryCourseType)}" value="">=请选择=</option>-->
            <option th:each="list:${courseTypeList}" th:value="${list.typeId}" th:text="${list.typeName}"></option>
        </select>
        <input type="submit" value="查询"/>
    </form>
</div>

<table border="0" cellspacing="0">
    <tr>
        <th>序号</th>
        <th>编号</th>
        <th>名称</th>
        <th>课时</th>
        <th>学分</th>
        <th>类型</th>
        <th>状态</th>
        <th>选课要求</th>
        <th>备注</th>
        <th>操作</th>
    </tr>
    <tr th:each="course, iterStat : ${page.records}" stat>
        <td th:text="${iterStat.index + 1}" nowrap></td>
        <td th:text="${course.courseNo}" nowrap></td>
        <td nowrap style="padding-top:10px;">
            [[${course.courseName}]]<br>
            <img width="100" height="50" th:alt="${course.courseName+'的教材'}" th:src="@{/course/getPic/{courseNo}(courseNo=${course.courseNo})}"/>
        </td>
        <td th:text="${course.courseHours}" nowrap></td>
        <td th:text="${course.coursePoint}" nowrap></td>
        <td th:text="${course.courseType.typeName}" nowrap></td>
        <td nowrap>
            <span th:if="${course.courseStatus eq 'O'}">开放公选</span>
            <span th:if="${course.courseStatus eq 'Z'}">暂不开放</span>
            <span th:if="${course.courseStatus eq 'C'}">停止授课</span>
        </td>
        <td nowrap>
            <span th:each="req : ${course.courseReqs}">
                <label th:if="${req eq 'a'}">大三以上</label>
                <label th:if="${req eq 'b'}">平均成绩80分</label>
                <label th:if="${req eq 'c'}">党员</label>
                <label th:if="${req eq 'd'}">未拖欠学费</label>
            </span>
        </td>
        <td th:text="${course.courseMemo}" nowrap></td>
        <td>
            <button class="update" th:href="@{/course/preUpdate/{courseNo}(courseNo=${course.courseNo})}">修改</button>
            <button class="delete" th:href="@{/course/remove/{courseNo}(courseNo=${course.courseNo})}">删除</button>
        </td>
    </tr>
</table>
<div id="pageInfo">
    共[[${page.total}]]条,
    <span th:if="${ ( page.current - 1 ) * page.size + 1 == page.total }">
			当前显示第[[${page.total}]]条,
	</span>
    <span th:if="${ ( page.current - 1 ) * page.size + 1 != page.total }">
        <span th:if="${ page.current * page.size >= page.total }">
			当前显示[[${( page.current - 1 ) * page.size + 1}]]-[[${page.total}]]条,
	    </span>
		<span th:if="${ page.current * page.size < page.total }">
			当前显示[[${( page.current - 1 ) * page.size + 1}]]-[[${page.current * page.size}]]条,
	    </span>
	</span>
    第[[${page.current}]]/[[${(page.total % page.size == 0) ? (page.total / page.size) : (page.total / page.size + 1)}]]页
    |
    <a href="#" th:if="${page.current > 1}"><span class="linkspan" id="one">首页</span>&nbsp;</a>
    <a href="#" th:if="${page.current > 1}"><span class="linkspan" id="two">上一页</span>&nbsp;</a>
    <a href="#" th:if="${page.current < ((page.total % page.size == 0) ? (page.total / page.size) : (page.total / page.size + 1))}">
        <span class="linkspan" id="three">下一页</span>&nbsp;
    </a>
    <a href="#" th:if="${page.current != ((page.total % page.size == 0) ? (page.total / page.size) : (page.total / page.size + 1))}">
        <span class="linkspan" id="four">末页</span>&nbsp;
    </a>
    |
    到 <input type="text" id="pageNo" size=4 style="text-align:right;"/> 页
    <button class="linkspan" id="five" style="color:black;text-decoration:none;"> 跳 转 </button>
</div>
<script type="text/javascript" th:src="@{/js/jquery-3.1.1.min.js}"></script>
<script th:inline="javascript">
    $(function() {
        //删除操作
        $(".delete").click(function () {
            var href = $(this).attr("href");
            if (confirm("确定要删除吗?")) {
                $("form:eq(0)").attr("action", href).submit();
                return false;
            }

        });

        $(".update").click(function () {
            var href = $(this).attr("href");
            $(location).attr("href", href);
        });

        //分页操作
        $(".linkspan").click(function () {

            var pageNo = [[${page.current}]];
            var totalPageNum = [[${(page.total % page.size == 0) ? (page.total / page.size) : (page.total / page.size + 1)}]];
            var re = /^[0-9]+.?[0-9]*$/;

            if (String($(this).attr("id")) == String("one"))
                pageNo = 1;

            if (String($(this).attr("id")) == String("two"))
                pageNo = pageNo - 1;

            if (String($(this).attr("id")) == String("three"))
                pageNo = pageNo + 1;

            if (String($(this).attr("id")) == String("four"))
                pageNo = totalPageNum;

            if (String($(this).attr("id")) == String("five")) {
                var num = $.trim($("#pageNo").val());

                if (!re.test(num)) {
                    alert("输入的不是数字!");
                    return;
                }
                pageNo = parseInt(num);
                if (pageNo < 1 || pageNo > totalPageNum) {
                    alert("页号超出范围，有效范围：[1-" + totalPageNum + "]!");
                    return;
                }

            }

            var act="?pageNo="+pageNo;
            $("form:eq(1)").attr("action",act).submit();
            return false;

        });
    });

</script>
</body>
</html>